<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeType">
      <a-tab-pane key="1" title="设备状态">
        {{ vehicleFirm ? `【${vehicleFirm}】` : '' }}设备{{ vehicleSn }}状态
        <OperateLog class="mt-3" :list="list" :id="routePrams.id" type="34" />
      </a-tab-pane>
      <a-tab-pane key="2" title="驾驶事件">
        {{ vehicleFirm ? `【${vehicleFirm}】` : '' }}设备{{ vehicleSn }}驾驶事件
        <OperateLog class="mt-3" :list="list" :id="routePrams.id" type="35" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="CarBoxQueryDetail">
  import { ref, watchEffect } from 'vue'
  import { getCarTboxVehicleDetail } from '@/api/asset/carTbox'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.params
  const routeQuery = route.query

  // 获取设备sn与名称
  const vehicleFirm = ref()
  const vehicleSn = ref()
  getCarTboxVehicleDetail({ id: routePrams.id }).then(({ result }) => {
    vehicleFirm.value = result.vehicleFirm
    vehicleSn.value = result.vehicleSn
  })

  // list 配置
  const list = [
    { title: '时间', dataIndex: 'operateTime', width: 150 },
    { title: '数据类型', dataIndex: 'node', width: 200 },
    { title: '设备状态', dataIndex: 'businessStatusName', width: 120 },
    { title: '备注', width: 160, slotName: 'log' },
  ]

  // 默认选中某个 tab
  const activeType = ref('1')
  watchEffect((newVal) => {
    if (newVal) activeType.value = routeQuery.activeType
  })
</script>
